<template>
  <div class="budgetBox">
    <div v-if="projectForm.ysbys==1">
      <table class="input" border="1px solid rgba(212, 232, 228, 0.73)" cellspacing="0">
        <thead>
          <tr class="title">
            <th>预算科目名称</th>
            <th>金额（万元）</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in data.table1" :key="index">
            <td>
              <span v-html="`&emsp;`.repeat(processArray(item.subjectName))"></span>{{ item.subjectName }}
            </td>
            <td>
              <input
                :disabled="title.includes('详情')"
                type="text"
                @input="item.amount = NumberCheck(item.amount)"
                :maxlength="10"
                v-model="item.amount"
              />
            </td>
          </tr>
          <tr>
            <td>合计</td>
            <td>
              <input disabled type="text" min="0" placeholder="自动计算" :value="data.totalNum1" />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="out" v-if="projectForm.ysbys==0">
      <table class="table2" border="1px solid rgba(212, 232, 228, 0.73)" cellspacing="0">
        <thead>
          <tr class="title">
            <th>预算科目名称</th>
            <th>中央财政资金</th>
          </tr>
        </thead>
        <tbody class="">
          <tr v-for="(item, index) in data.table2" :key="index">
            <td>
              <span v-html="`&emsp;`.repeat(processArray(item.subjectName))"></span>{{ item.subjectName.substring(0,item.subjectName.length-4)}}
            </td>
            <td>
              <input
                :disabled="title.includes('详情')"
                type="text"
                @input="item.amount = NumberCheck(item.amount)"
                :maxlength="10"
                v-model="item.amount"
              />
            </td>
          </tr>
        </tbody>
      </table>
      <table class="table3" border="1px solid rgba(212, 232, 228, 0.73)" cellspacing="0">
        <thead>
          <tr class="title">
            <th>预算科目名称</th>
            <th>其他来源资金</th>
          </tr>
        </thead>
        <tbody class="">
          <tr v-for="(item, index) in data.table3" :key="index">
            <td>
              <span v-html="`&emsp;`.repeat(processArray(item.subjectName))"></span>{{ item.subjectName }}
            </td>
            <td>
              <input
                :disabled="title.includes('详情')"
                type="text"
                @input="item.amount = NumberCheck(item.amount)"
                :maxlength="10"
                v-model="item.amount"
              />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent,onMounted, reactive, ref, watch, onBeforeUnmount } from 'vue'
import { useStore } from 'vuex'
import { NumberCheck, processArray } from '@/utils/utils'

export default defineComponent({
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  setup() {
    const store = useStore()

    let projectForm = reactive(store.state.projectCenter.form)
    console.log(projectForm,'projectForm');
    const input = ref()
    const data = reactive({
      table1: [{ subjectName: '', amount: '', subject: '' }],
      table2: [{ subjectName: '', amount: '', subject: '' }],
      table3: [{ subjectName: '', amount: '', subject: '' }],
      totalNum1: 0,
      totalNum2: 0,
    })
    let subjectList1=['yzyczzxzj','yzjfyi','sbfi','qzgzsbf','ywf','lwf',
    'ejjfyi','eqtlyzj']
    let subjectList2=['yzjzczy','yzjzcqt','yzjfyzy','yzjfyqt','sbfzy','sbfqt',
    'gzsbfzy','gzsbfqt','sbsjgzzlfzy','sbsjgzzlfqt','clfzy','clfqt','hyclfzy',
    'hyclfqt','ejjfyzy','ejjfyqt','ezjlyzy','ezjlyqt','yzyczzjzy','yzyczzjqt',
    'eqtzjlyzy','eqtzjlyqt','dfczzjzy','dfczzjqt','dwzczjzy','dwzczjqt',
    'qtzjzy','qtzjqt']
    const filterTable = () => {
      projectForm.projectInvestmentsList = projectForm.projectInvestmentsList.filter((item) => {
        // return subjectList.includes(item.subject) && item.sfsybb==0
        return !('sfsybb' in item )|| item.sfsybb == 0
      }).sort((a,b)=>{
        return subjectList2.indexOf(a.subject)-subjectList2.indexOf(b.subject)
      })
      console.log(projectForm.projectInvestmentsList, 'projectForm.projectInvestmentsList')
    }
    //分开table数据
    const hadTable = () => {
      data.table1 = []
      data.table2 = []
      data.table3 = []
      projectForm.projectInvestmentsList?.forEach((e: any) => {
        if (subjectList1.includes(e.subject)) {
          data.totalNum1 += Number(e.amount)
          data.table1.push(e)
        } else if(subjectList2.includes(e.subject)){
          data.totalNum2 += Number(e.amount)
          if(e.subjectName.includes('（中央）')){
            data.table2.push(e)
          }else{
            data.table3.push(e)
          }
        }
      })
      data.table1 = data.table1.sort((a,b)=>{
        return subjectList1.indexOf(a.subject)-subjectList1.indexOf(b.subject)
      })
      console.log(data.table2,'data.table2');
      data.totalNum1.toFixed(2)
      data.totalNum2.toFixed(2)
    }
    onMounted(() => {
    console.log(store.state.projectCenter.form,'store.state.projectCenter.form');
      filterTable()
      hadTable()
    })
    watch(
      () => data.table1,
      () => {
        data.totalNum1 = 0
        data.table1?.forEach((e: any) => {
          data.totalNum1 += Number(e.amount)
        })
        data.totalNum1 = data.totalNum1.toFixed(2) as any
      },
      { deep: true }
    )
    watch(
      () => data.table2,
      () => {
        data.totalNum2 = 0
        data.table2?.forEach((e: any) => {
          data.totalNum2 += Number(e.amount)
        })
        data.totalNum2 = data.totalNum2.toFixed(2) as any
      },
      { deep: true }
    )
    onBeforeUnmount(() => {
      console.log('预算经费表格卸载了')
    })
    return {
      input,
      data,
      hadTable,
      NumberCheck,
      processArray,
      projectForm
    }
  },
})
</script>

<style scoped lang="scss">
th {
  height: 25px;
}
.title {
  text-align: center;
  line-height: 36px;
  background-color: #f0f2f5;
  th {
    width: 200px;
  }
  th:nth-child(3) {
    width: 250px;
  }
}
.label {
  text-align: center;
  line-height: 28px;
}

input {
  outline: none;
  width: 90%;
  margin: 0 5%;
}
.budgetBox {
  width: 100%;
  // background-color: #492222;
  table {
    // float: left;
    line-height: 30px;
    td {
      height: 34px;
    }
  }
  justify-content: center;
  .input {
    margin: 0 10%;
    th:first-child {
      width: 500px;
    }
  }
  .out{
    display: flex;
    margin: 0 10%;
    margin-top:20px;
    th:first-child {
      width: 500px;
    }
    .table2{
      z-index: 100;
    }
    .table3{
      // background-color: #7c4747;
      // margin-left: -350px;
      th:first-child {
        display: none;
      }
      tr td:first-child {
        display: none;
      }
    }
  }
}
</style>
